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^ Abstract 

o 

The JSC language is a superset of JavaScript designed to ease the de- 
velopment of large web applications. This language extends JavaScript's 

own object system by isolating code in a class declaration, simplifying 
^ multiple inheritance and using method implementation agreements. 

Q 

IT) 1 Motivation 

As web applications have been gaining more dynamic behavior, JavaScript has 

^ "I become more important in web development. As such, it is useful to use a soft- 

p ^ ware engineering aproach to JavaScript. 

Q JavaScript object-oriented model is prototype-based. This model can be ex- 

^ trcmcly versatile to develop. However, in a large team of developers, not only 

^ problems such as name colisions and unintentional method redefinition can oc- 

^ cur, but also maintenance becomes an issue. 

JSC attempts to remedy some of these issues by implementing a Object 
System on top of standard JavaScript. 

^ 2 Related Work 

as 

There have been some attemps to add structed programming to Javascript. 

> 

In ECMAScript (language from witch JavaScript is a dialect) last version 
were added support for defining classes. Another dialect of ECMAScript, Ac- 
tionScript supports defining classes. Althought those systems arc more ad- 
vanced (they support typechecking via anotation on variables, generics, dy- 
namic classes, templates, etc.), they aren't avaible in the current browsers. It's 
expected that future versions of JavaScript extends this behavior from EC- 
MAScript. 



X 



Other attempt have been creating creating supersets to JavaScript. One 
example of this is Objective-J. This is a sctrict superspet of Javascript, but 
adds a object system by implementing a language similar to Objective-C. This 
aproach is similar to JSC, but this language uses the same message passing than 
Objective-C making the methods unparsable by JavaScript. 
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3 Object Oriented JavaScript 



In JavaScript, a class is a function, so its definition is similar to the definition 
of a function, as shown next: 



1 function Rectangle(w, h) { 

2 this. width = w; 

3 this. height = h; 

4 > 

A function in javascript is of type Function but behaves similarly to a hash 
or a dictionary. One of the properties in this object is the prototype. This prop- 
erty represents a structure that is not yet fully defined and it is only formed 
when it is instantiated. Instantiation can be done by: 



new RectangleClO, 10) ; 

new operator will invoke the function Rectangle with this as a new object 
with a reference to Rectcingle .prototype, and return this object^. Any changes 
made to this object will only afect the new object, and not the prototype. If a 
property is not defined in the object but on the prototype, then the prototype's 
value is returned. 

A method can be defined by adding a function to the class prototype as 
shown next: 



1 Rectangle . prototype . getArea = function (){ 

2 return this. height * this. width; 

3 } 

Methods are called like this: 
rectangle . getHeight () 

As with the constructor, getHeight will be invoked with this as a reference 
to the instance, in this case to rectangle. This method will be avaible to all 
instances that don't define localy the method getArea. 

The code below shows how inheritance is implemented: by copying the 
prototype of the superclass to the subclass. 



1 function PositionedRectEingleCx, 


y, w, h) { 


2 Rectangle . call (this , w, h) ; 




3 

4 this.x = x; 




5 this.y = y; 




6 } 




7 PositionedRectEingle. prototype = 


new Rectsingle ; 



Actually Rectangle could return anything, but the default is this 
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3.1 Problems 

The first problem is the inexistence of separation between functional and object 
oriented programming. All the examples shown are extensions to JavaScript's 
functional programming that allows to create a behavior similar to object ori- 
ented. 

Another problem is that today browsers share the same enviroment will all 
JavaScript files. It's possible to have the same method defined in two distinct 
files. This can difficult debugging and maintenance. 

4 Objectives 

JSC is an extension to JavaScript and was developed with the following goals 
in mind: 

• Create a new object-oriented language, but keep (as much as possible) 
JavaScript's syntax and semantics. 

• Provide mechanisms to maintain the code isolated in packages. 

• Provide a meta-object protocol that allows an easy use of reflection and 
intersection, while keeping the code organized. 

• Provide simple and easy to use multiple inheritance. 

• Provide an implementation agreement between classes, which is similar to 
Java's interfaces or to Objective-C's protocols. 

5 JSC 

5.1 Class Definition 

JSC is defined in classes. Each class is defined in a single file. A simple JSC 
Class is show next: 



1 package UI . Component ; 

2 




3 class Rectangle{ 




4 slots : [height , width] , 




5 Rectangle: function (w,h){ 




6 this . setHeight (h) ; 




7 this . setWidth(w) ; 




8 }, 




9 getArea: function (){ 




10 return this . getHeight () * this .getWidthO ; 




11 > 




12 } 




Each class begins with a package declaration. A class is 


always referred to 


by its package and class name (in this case UI . Component 


Rectangle). The 



body of the class is declared as a JavaScript Object. The fourth line represents 
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the slot declaration. In JSC, class slots can't be directly used. To access a slot, 
a getter and setter method is provided for each slot. The fifth and ninth lines 
declare a constructor and a method, respectively. A constructor is a method 
with the same name of the class. A constructor is not required, but there can 
be only one by class. 

It is important to notice that only the class header and the slot definition 
aren't capable of being parsed by JavaScript. 

5.2 Instantiation 

JSC attempts to minimize the usage of the global enviroment. Actually, the 
only global definition required is the function Class. This function expects a 
string with the canonical class location (package and name), and returns the 
meta-object representing such class. In our example. Rectangle's meta-class 
can be obtained by: 



Class ( "Ul . Component . RectEoigle" ) 

In runtime, each meta-class contains, among others, a method called create. 
This method will create a new instance and call the class constructor. With this, 
we can now instantiate our Rectangle class: 



Class ( "UI . Component . Rectangle" ) . create (10 , 10) 

5.3 Inheritance 

Inheritance can be used by extending the superclass as shown next: 

1 package UI . Component ; 

2 

3 class PositionedRectangle extends UI .Component .Rectangle{ 

4 slots : [x,y] , 

5 PositionedRectangle: function (x,y,w,li){ 

6 Class ("UI .Component .Rectangle") . init (this ,w,h) ; 
7 

8 this . setX(x) ; 

9 this . setY(y) ; 

10 > 

11 } 

Inheritance in JSC works like mixins. Each class method and slot from 
the superclass will be added to the subclass. A class can extend from several 
classes. In PositionedRectangle both the height and with slot, getters and 
setters from Rectsmgle were copied. The token extends insted of mixin was 
used because makes the class header similar to ECMAScript V4 and Java's. 

Each meta-class object contains a init method that calls the constructor 
for that class, using the first argument as the instance. This is similar how 
Python's superclass constructor is called. 
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5.4 Static Enviroment 



Each JSC class can declare methods that can be used on a meta-class level. A 
simple example is shown next: 



1 package Main; 

2 

3 class App { 

4 static :{ 

5 main: function (args){ 
6 

7 > 

8 } 

9 } 



5.5 Protocols 

A protocol in JSC assures the existence of certain methods. A protocol decla- 
ration is shown next: 

1 package UI . Component ; 

2 

3 protocol Draggable ■[ 

4 element : true , 

5 eventListener : false 

6 } 

In our example Draggable declares the existence of two methods, element 
and eventListener. The keyword next to the method name declares the need 
to implement it. true declares that this method is required to be implemented 
in each class that extends this protocol while false guarantees that if such 
method is not implemented, an empty function with such name will be provided. 

A protocol can be extended only from other protocols, and a class can im- 
plement any number of protocols. The verification of required methods is done 
both in run- and compile-time. 

5.6 Class initialization 

When JSC starts'^, all classes in the classpool are going to be initialized. This 
is done by invoking the meta-class method classlnit. 

This method will compute the effective set of methods and slots that this 
class possesses, and it will detect if all the protocols have been satisfied. Finally, 
it will setup the prototype. 



^See Usage for more details 
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5.7 Runtime intersection 



It is possible to create a new class/protocol, or change a class/protocol by al- 
tering the meta-class definition, in any moment during execution. However, it 
is required to call again classlnit so that the prototype is reconstructed. 

It's also possible to extend the behavior of JSC by extending the Isoig . Class 
class. Protocols is one example of this, but it's quite simple to implement 
something similar to Java's abstract classes in JSC. 

6 Current Problems 
6.1 Global Variables 

JSC attempts to minimize the usage of the global enviroment by encapsulating 
the code into classes. However, However, JavaScript allows the declaration of 
gobal variables from within a function.. Any variable that is declared without 
the keyword var is declared in the global enviroment. For instance: 



1 function Foo(){ 

2 var local = 1 ; 

3 global = 1; 

4 } 

Currently, this is not allowed in JSC, but it is not verified. 



6.2 Slot default value 

Currently, the slot declaration doesn't allow a slot to have a default value. It 
would be nice to have a slot declaration similar to this: 



1 

2 


package Bar; 






3 


class Foo{ 






4 


slots : { 






5 


aSlot:-[ getter 


"getSlot", setter : "setit" , 


default:! }, 


6 


anotherSlot : { 


default: Class ("Baz .Bing") 


create (1,2) > 


7 


> 






8 


} 







Currently, JSC doesn't support this syntax because there isn't a easy to use 
parser of JavaScript available. The JSC compiler assures the correctness of the 
code by loading the methods into a JavaScript Engine and detecting the parsing 
errors generated.'^ 



When such parser is available, both this and the Global Variables problem 
can be addressed. 

''jscc (JSC Compiler) currently uses Google's V8 Engine 
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7 Usage 



The current compiler can target 3 usage methods: 

• Server - JSC was developed due to a need for developing a lot of code to 
run in a web server. In this mode, the code is loaded into a RDBMS and 
loaded upon need. 

• Client - Another usage is generating a single classpool image in a self con- 
tained JavaScript file and load it in a browser like an ordinary JavaScript 
file. The JSC code can be accessed from other JavaScript files by using 
Class function. 

• JSC Virtual Machine - j scvm is a small virtual machine implementation 
of JSC. 



8 Performance 

A small library, implemented in JSC and with 19 files, occupies 196 KB. After 
compilation targeting the browser ended with a single file occupying 56KB. This 
file takes from below a second in Chrome and up to 2 seconds in Firefox. 

After using the YUI Compressor^ this file shrinked to 40Kb. It almost loaded 
instantaneously both in Chrome and Firefox. 



^ YUI Compressor is available at http : / /developer . yahoo . com/yui/ compressor/. This 
application not only removes whitespaces, but also reduces the variable names. 
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